import React, { useState, useEffect, useReducer } from 'react'
import { View, Text, TextInput, Button, StyleSheet } from 'react-native'
import { connect } from 'react-redux'

import axios from 'axios'//当页面有第二个get/post/put/delete方法时，直接使用axios调用

import stateToProps from '../store/stateToProps'//变量
import dispatchToProps from '../store/dispatchToProps'//方法

const Home = (props) => {
    let { inputValue, inputChange, clickBtn,postFun,deleteFun, getFun,putFun,
         list, data, post, } = props
    /*这里是页面加载完成时调用，会调用get请求，拉取数据*/
    // useEffect(() => {
    //     getFun()
    // })
    return (
        <View>
            <TextInput style={styles.input}
                onChangeText={inputChange}
                multiline={true}
                autoFocus={true}
                value={inputValue}>
            </TextInput>
            <Button title='提交'
                onPress={clickBtn}
            ></Button>
            <View>
                {
                    list.map((item, index) => {
                        return (
                            <View key={index}>
                                <Text>{item}</Text>
                            </View>
                        )
                    })
                }
            </View>

            {/* get请求*/}
            <Button title='GET' onPress={() => getFun('https://www.fastmock.site/mock/9e4bbf9e35ad15942010865690c87ac6/api/getgoodslist')}></Button>
            <View>
                {
                    data.map((item, index) => {
                        return (
                            <View key={index}>
                                <Text>{item.title}</Text>
                            </View>
                        )
                    })
                }
            </View>


            {/* post    obj为要提交的数据，obj要自己传递，格式为Object：{id: ,title:' ' }*/}
            <Button title='POST' onPress={(obj, url) => postFun(obj, url)}></Button>


            {/* delete  obj:为要删除的数据*/}
            <Button title='DELETE' onPress={(obj, url) => deleteFun(obj, url)}></Button>


            {/* put     obj:为要更新的数据*/}
            <Button title='PUT' onPress={(obj, url) => putFun(obj, url)}></Button>
        </View>
    )

}

const styles = StyleSheet.create({
    input: {
        margin: 5,
        borderColor: 'black',
        borderWidth: 1
    }
});
//每个自己写的组件（页面）都要用下面这一行
export default connect(stateToProps, dispatchToProps)(Home);
